<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短视频播放器</title>

    <!-- 外部资源 -->
    <script src="/js/tailwindcss.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 本地资源 -->
    <link rel="stylesheet" href="/css/styles.css">
    <script src="/js/short-video-player.js" defer></script>
</head>

<body class="bg-black text-white overflow-hidden">
    <!-- 主容器 -->
    <div class="relative w-full h-screen flex items-center justify-center">
        <!-- 视频容器 -->
        <div id="videoContainer" class="video-container relative bg-black overflow-hidden shadow-2xl w-full h-full">
            <!-- 背景图（视频加载失败时显示） -->
            <div id="backgroundImage"
                class="absolute inset-0 bg-gradient-to-br from-purple-900 via-pink-800 to-red-900 flex items-center justify-center">
                <div class="text-center">
                    <i class="fa fa-film text-6xl text-white/80 mb-4 animate-pulse-slow"></i>
                    <h1 class="text-3xl font-bold mb-2 text-white">暂无视频内容</h1>
                    <p class="text-white/70 mb-6 max-w-md mx-auto">请将视频文件添加到videos目录中，或点击下方按钮刷新视频索引</p>
                    <button id="initialRetryButton" class="px-6 py-3 bg-white/20 hover:bg-white/30 text-white rounded-full transition-all duration-300 backdrop-blur-sm border border-white/30">
                        <i class="fa fa-refresh mr-2"></i>刷新视频索引
                    </button>
                </div>
            </div>

            <!-- 当前视频 -->
            <video id="currentVideo" class="w-full h-full object-fill" autoplay muted playsinline></video>

            <!-- 加载动画 -->
            <div id="loadingIndicator" class="absolute inset-0 flex flex-col items-center justify-center bg-black/50 hidden">
                <!-- 新的双层旋转动画 -->
                <div class="loading-spinner mb-4"></div>
                <p class="text-white text-lg">正在加载视频...</p>
            </div>

            <!-- 错误提示 -->
            <div id="errorMessage"
                class="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-gray-900 to-black hidden">
                <div class="relative mb-6">
                    <!-- 装饰性元素 -->
                    <div class="absolute -inset-4 bg-red-500/20 rounded-full blur-lg"></div>
                    <i class="fa fa-exclamation-triangle text-5xl text-red-500 relative z-10"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-2">哎呀，出错了!</h3>
                <p id="errorText" class="text-gray-300 text-center mb-6 max-w-md px-4">
                    视频加载失败，请检查网络连接或稍后重试
                </p>
                <button id="retryButton" class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white rounded-full transition-all duration-300 transform hover:scale-105">
                    <i class="fa fa-refresh mr-2"></i>重新加载
                </button>
                <p class="text-gray-500 text-sm mt-4">滑动也可切换到下一个视频</p>
            </div>

            <!-- 播放控制覆盖层 -->
            <div id="playOverlay" class="absolute inset-0 flex items-center justify-center bg-black/40 hidden">
                <div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
                    <i id="playIcon" class="fa fa-play text-3xl text-white ml-1"></i>
                </div>
            </div>

            <!-- 静音图标 -->
            <div id="muteControl" class="absolute bottom-4 right-4 pointer-events-auto">
                <i id="muteIcon" class="fa fa-volume-up text-xl text-white"></i>
            </div>

            <!-- 视频进度条 -->
            <div id="progressContainer" class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600 cursor-pointer">
                <div id="progressBar" class="h-full bg-red-500 relative">
                    <div id="progressHandle" class="absolute right-0 top-1/2 transform -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg opacity-0 transition-opacity duration-200"></div>
                </div>
            </div>

            <!-- 顶部渐变遮罩 -->
            <div class="absolute top-0 left-0 right-0 h-32 gradient-overlay pointer-events-none"></div>

            <!-- 顶部控制栏 -->
            <div class="absolute top-0 left-0 right-0 p-4 pointer-events-none">
                <!-- 服务器状态 -->
                <div id="serverStatus" class="absolute top-4 left-4 text-xs text-gray-400 pointer-events-auto">
                    <i class="fa fa-circle text-green-400 animate-pulse"></i>
                    <span id="statusText">已连接</span>
                </div>
                
                <!-- 播放模式显示 -->
                <div id="playModeIndicator" class="absolute top-4 right-4 text-xs text-gray-400 pointer-events-auto bg-black/30 px-2 py-1 rounded">
                    <span id="modeText">随机播放</span>
                </div>
            </div>
        </div>

        <!-- 滑动提示 -->
        <div id="swipeHint"
            class="absolute bottom-20 left-1/2 transform -translate-x-1/2 flex items-center space-x-2 bg-black/30 px-4 py-2 rounded-full backdrop-blur-sm animate-pulse-slow">
            <i class="fa fa-chevron-up text-sm swipe-indicator"></i>
            <span class="text-sm">上下滑动切换视频</span>
            <i class="fa fa-chevron-down text-sm swipe-indicator" style="animation-delay: 0.3s;"></i>
        </div>

        <!-- 历史提示 -->
        <div id="historyHint"
            class="absolute top-4 left-1/2 transform -translate-x-1/2 bg-black/70 px-4 py-2 rounded-full backdrop-blur-sm hidden">
            <span class="text-sm">已到最早观看视频</span>
        </div>

        <!-- 索引更新提示 -->
        <div id="indexUpdateHint"
            class="absolute top-4 right-4 bg-green-600/80 px-3 py-2 rounded-lg backdrop-blur-sm text-xs hidden">
            <i class="fa fa-check"></i> 索引更新成功
        </div>

        <!-- 键盘提示 -->
        <div id="keyboardHint"
            class="absolute top-4 left-1/2 transform -translate-x-1/2 bg-black/50 px-3 py-2 rounded-lg backdrop-blur-sm text-xs opacity-70 hidden md:whitespace-nowrap whitespace-normal max-w-xs md:max-w-md lg:max-w-lg text-center">
            <p>↑↓ 切换视频 | ←→ 调整进度 | 空格 播放/暂停 | R 刷新索引 | M 静音/取消静音 | L 切换播放模式 | H 显示/隐藏帮助</p>
        </div>
    </div>
</body>

</html>